<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>6-2三维变形</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        code{
            text-shadow: none;
            font-size: 13px !important;
        }
        div{
            width:240px;
            height:180px;
            padding: 20px;
            margin: 20px auto;/*margin:auto;!*只有将元素居中才能容易看出正确的旋转效果*!*/
            border:20px solid;
            /*display: inline-block;*/
            color: #fff;
            text-shadow: 1px 1px 2px black;
            font-family: 微软雅黑;
            font-weight: bold;
            vertical-align: top;
            background: url("../05backgroundAndBorder/redBgFlower.jpg") 0 5% repeat-x, url("../05backgroundAndBorder/blackCat.jpg") center bottom no-repeat, linear-gradient(to bottom, #5964ae 0% , #557eff 25%, #f0d187 61.8%,#91a200 80%, green 95%);
            background-size: 10%,40%,100%;
            border-image: url("../05backgroundAndBorder/borderImg.png") 20  repeat;
            background-origin: padding-box;
        }
        #rotate3D,#scale3D,#skew3D,#translate3D{
            perspective:500px;/*这个属性只能加给父元素才起作用*/
        }
        #rotate3D div:nth-of-type(1):hover{
            transform: rotateX(45deg);
        }
        #rotate3D div:nth-of-type(2):hover{
            transform: rotateY(45deg);
        }
        #rotate3D div:nth-of-type(3):hover{
            transform: rotateZ(45deg);
        }

        #scale3D div:nth-of-type(1):hover{
            transform: scaleX(1.5) rotateY(-15deg);
        }
        #scale3D div:nth-of-type(2):hover{
            transform: scaleY(1.5) rotateY(-15deg);
        }
        #scale3D div:nth-of-type(3):hover{
            transform: scaleZ(2) rotateY(-15deg);/*不知为何此参数无效？！*/
        }

        #skew3D div:nth-of-type(1):hover{
            transform: skewX(30deg);
        }
        #skew3D div:nth-of-type(2):hover{
            transform: skewY(30deg);
        }

        #translate3D div:nth-of-type(1):hover{
            transform: translateX(100px);
        }
        #translate3D div:nth-of-type(2):hover{
            transform: translateY(100px);
        }
        #translate3D div:nth-of-type(3):hover{
            transform: translateZ(100px);
        }
     </style>
</head>
<body>
<h1>6-2三维变形</h1>
<h3>三维旋转</h3>
<section id="rotate3D">
    <div><br><code>transform: rotateX(45deg);</code><br>鼠标移入后围绕X轴旋转45度</div>
    <div><br><code>transform: rotateY(45deg);</code><br>鼠标移入后围绕y轴旋转45度</div>
    <div><br><code>transform: rotateZ(45deg);</code><br>鼠标移入后围绕z轴旋转45度</div>
</section>

<h3>三维缩放</h3>
<code>transform:rotateY(-15deg);</code>
<section id="scale3D">
    <div><br><code>transform: scaleX(1.5)<br> rotateY(-15deg);</code><br>鼠标移入后转动并x方向放大到1.5倍</div>
    <div><br><code>transform: scaleY(1.5)<br> rotateY(-15deg);</code><br>鼠标移入后转动并y方向放大到1.5倍</div>
    <div><br><code>transform: scaleZ(2)<br>   rotateY(-15deg);</code><br>鼠标移入后转动并z方向应该放大到2倍</div>
</section>

<h3>三维倾斜</h3>
<section id="skew3D">
    <strong>不存在z轴的倾斜，所以没有transform: skewZ(30deg)这样的值</strong>
    <div><br><code>transform: skewX(30deg);</code>鼠标移入后沿着x方向倾斜30度</div>
    <div><br><code>transform: skewY(30deg);</code>鼠标移入后沿着y方向倾斜30度</div>
</section>

<h3>三维平移</h3>
<section id="translate3D">
    <div><br><code>transform: translateX(100px);</code>鼠标移入后沿着x方向平移100像素</div>
    <div><br><code>transform: translateY(100px);</code>鼠标移入后沿着y方向平移100像素</div>
    <div><br><code>transform: translateZ(100px);</code>鼠标移入后沿着y方向平移100像素</div>
</section>

</body>
</html>